@import '../../../sass/colors';
@import '../../../sass/fonts';
@import '../../../sass/mixins';
@import '../../../sass/media-queries';

.auto-peering {
  margin: 40px;

  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @include tablet-down {
      flex-direction: column;
    }

    .badge {
      @include font-size(14px);

      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      padding: 8px;
      border-radius: 6px;
      font-family: $inter;
      text-align: center;

      @include tablet-down {
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 0px;
      }


      &.online {
        background-color: $dark-green;
        color: $white;
      }

      &.neighbors {
        background-color: $gray-5;
        color: $white;
      }
    }
  }

  .nodes-container {
    display: flex;
    flex-direction: row;

    @include tablet-down {
      flex-direction: column;
    }


    .nodes {
      flex: 1;

      .node-list {
        height: 140px;
        padding: 2px;
        overflow: auto;

        button {
          width: 100px;

          &.selected {
            background: $main-green;
            color: $white;
          }
        }
      }
    }

    .node-view-container {
      display: flex;
      flex: 1;
      max-height: 240px;
      margin-left: 20px;
      overflow: hidden;

      @include tablet-down {
        margin-top: 20px;
        margin-left: 0px;
      }
    }
  }

  .visualizer {
    top: 0;
    left: 0;
    width: 100%;
    height: 30vw;
    border-radius: 20px;
    background: $dark-gray;
    overflow: hidden;
    z-index: -1;

    .mana-legend{
      position: absolute;
      left: 50%;
      margin-left: -150px;
      margin-top: 10px;
      color: white;
      width: 300px;

      .bar{
        height: 10px;
        background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(120, 100%, 50%), hsl(60, 100%, 50%), hsl(0, 100%, 50%));
      }
    }

    .controls {
      position: absolute;
      right: 3%;
      color: white;
      float: right;
      padding-top: 20px;
      padding-right: 10px;
    }
  }



}
